<style>
	fieldset.fieldset-border {
		border: 1px groove #ddd !important;
		padding: 0 1.4em 1.4em 1.4em !important;
		margin: 0 0 1.5em 0 !important;
		-webkit-box-shadow:  0px 0px 0px 0px #000;
				box-shadow:  0px 0px 0px 0px #000;
	}
    legend.fieldset-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }
</style>
<script type="text/javascript">
var sertifikat_edit;
var sertifikat_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var sertifikat_expander=$('#sertifikat_expander');
    var sertifikat_print=$("#sertifikat_print");
    var sertifikat_pdf=$("#sertifikat_pdf");
/* Form Component Declaration */
    sertifikat_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : true});
	$("#sertifikat_tanggal").jqxDateTimeInput({ height: '25px', formatString : 'dd-MM-yyyy' });
	$("#sertifikat_tanggal_akhir").jqxDateTimeInput({ height: '25px', formatString : 'dd-MM-yyyy' });
	
    sertifikat_print.jqxButton();
    sertifikat_print.bind('click', function(e){ sertifikat_print_form(e, 'print'); });
    sertifikat_pdf.jqxButton();
    sertifikat_pdf.bind('click', function(e){ sertifikat_print_form(e, 'pdf'); });
/* Function Declaration */
    function sertifikat_print_form(e, type){
        e.preventDefault();
        var params = new Object();
        params.form_data=$('#sertifikat_form').serializeObject();
		params.form_data.type=type;
		params.form_data.sertifikat_tanggal_akhir=$("#sertifikat_tanggal_akhir").jqxDateTimeInput('val');
		params.form_data.sertifikat_jenis=$("#sertifikat_jenis").jqxComboBox('val');
        params=JSON.stringify(params);
        $.ajax({
            url : 'c_sertifikat/cetak_sertifikat',
            method : 'post',
            data : {params:params},
            success : function(response){
                if(type == 'print'){
					window.open('temp/' + response + '.html');
				}else{
					window.open('temp/' + response + '.pdf');
				}
            }
        });
    }
});
</script>
<div>
    <div id="sertifikat_expander" style="padding-bottom : 10px;">
        <div>Cetak Sertifikat</div>
        <div>
            <form class="form-horizontal" id="sertifikat_form" style="padding:10px;overflow:hidden;">
                <div class="form-group">
                    <label class="col-sm-2 control-label">NIS</label>
                    <div class="col-sm-4"><input type="text" name="sertifikat_nis" id="sertifikat_nis" placeholder="NIS Siswa"></div>
                </div>
				<fieldset class="fieldset-border">
					<legend class="fieldset-border">Periode</legend>
					<div class="form-group">
						<label class="col-sm-2 control-label">Tanggal Awal</label>
						<div class="col-sm-4"><div name="sertifikat_tanggal" id="sertifikat_tanggal"></div></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">Tanggal Akhir</label>
						<div class="col-sm-4"><div name="sertifikat_tanggal_akhir" id="sertifikat_tanggal_akhir"></div></div>
					</div>
				</fieldset>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="sertifikat_print">Cetak</button>
                        <button type="button" id="sertifikat_pdf">Export PDF</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>